<!--
 * @Author: Bonnie
 * @Date: 2021-12-22 17:32:13
 * @LastEditTime: 2021-12-22 18:00:02
 * @LastEditors: Bonnie
 * @Description: 可选链操作符
 * @FilePath: /public_demo/src/views/JsSkill/page1.vue
-->
<template>
  <div>
    <p>当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。</p>
    <h4>示例如下：</h4>
    <article>
      <pre>
            <code>
// 定义一个对象
let obj = {
    o1: 'o1',
    o2: {
        o22: 'o22'
    }
}
            </code>
        </pre>
    </article>
    <h5 class="mt10">正常情况下获取o22的值：</h5>
    <article>
      <pre>
                <code>
let get1 = undefined;
if (obj && obj.o2 && obj.o2.o22) {
    get1 = obj.o2.o22;
}
console.log('get1', get1);
                </code>
            </pre>
    </article>
    <h5 class="mt10">使用可选链操作符：</h5>
    <article>
      <pre>
                <code>
let get2 = obj?.o2?.o22 || undefined;
console.log('get2', get2);
                </code>
            </pre>
    </article>
  </div>
</template>
<script>
